<template>
	<div class="device-frame-list">
		<div class="device-frame-list-container flex-container">
			<div class="panel-list">
				<div class="item-panel">
					<div class="row-content">
						<div class="row-item">
							<div class="title">设备ID：</div>
							<div class="content">{{id}}</div>
						</div>
						<div class="row-item">
							<div class="title">第三方平台设备ID：</div>
							<div class="content">{{newDevice.outer_device_id ? newDevice.outer_device_id : '-'}}</div>
						</div>
					</div>
				</div>
				<div class="clear-20"></div>
				<el-row class="item-panel">
					<el-tabs v-model="activeName" @tab-click="handleClick" class="tab-content">
						<el-tab-pane label="帧信息" name="first">
							<div class="device-frame-list-table">
								<el-table :data="frameList">
									<el-table-column label=" 上报时间" width="180">
										<template slot-scope="scope">
											{{scope.row.time | timeFormat}}
										</template>
									</el-table-column>
									<el-table-column label=" 事件时间" width="180">
										<template slot-scope="scope">
											{{scope.row.frame.time | timeFormat}}
										</template>
									</el-table-column>
									<el-table-column label="类型" width="120">
										<template slot-scope="scope">
											{{scope.row.frame | p20013FrameType}}
										</template>
									</el-table-column>
									<el-table-column label="车位状态" width="100">
										<template slot-scope="scope">
											{{scope.row.frame.state | parkStateType}}
										</template>
									</el-table-column>
									<el-table-column label="x轴" width="80">
										<template slot-scope="scope">
											{{scope.row.frame.x !== undefined ? scope.row.frame.x : '-'}}
										</template>
									</el-table-column>
									<el-table-column label="y轴" width="80">
										<template slot-scope="scope">
											{{scope.row.frame.y !== undefined ? scope.row.frame.y : '-'}}
										</template>
									</el-table-column>
									<el-table-column label="z轴" width="80">
										<template slot-scope="scope">
											{{scope.row.frame.z !== undefined ? scope.row.frame.z : '-'}}
										</template>
									</el-table-column>
									<el-table-column label="电压" width="80">
										<template slot-scope="scope">
											{{scope.row.frame.voltage !== undefined ? scope.row.frame.voltage : '-'}}
										</template>
									</el-table-column>
									<el-table-column label="温度" width="80">
										<template slot-scope="scope">
											{{scope.row.frame.temperature !== undefined ? scope.row.frame.temperature :
											'-'}}
										</template>
									</el-table-column>
									<el-table-column label="报警事件" width="100">
										<template slot-scope="scope">
											{{scope.row.frame.warn !== undefined ? scope.row.frame.warn : '-'}}
										</template>
									</el-table-column>
									<el-table-column label="原始数据">
										<template slot-scope="scope">
											<a class="link" @click="showFrameDialog(scope.row.frame)">{{ scope.row.data
																									  }}</a>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div class="flex-footer">
								<div class="flex-footer-content">
									<el-row>
										<el-col :span="24" class="text-center" v-if="total > 0">
											<el-pagination
													@current-change="pageChange"
													:page-size="pageSize"
													layout="total, prev, pager, next, jumper"
													:total="total">
											</el-pagination>
										</el-col>
									</el-row>
								</div>
							</div>
						</el-tab-pane>

						<el-tab-pane label="设备信息" name="second">
							<div class="item-panel">
								<div class="row-content">
									<div class="row-item">
										<div class="title">设备ID：</div>
										<div class="content">{{id}}</div>
									</div>
									<div class="row-item">
										<div class="title">设备类型：</div>
										<div class="content">{{space | spaceType}}</div>
									</div>
									<div class="row-item">
										<div class="title">设备状态：</div>
										<div class="content">{{device20013.deviceInfo ? (device20013.deviceInfo.status ?
															 device20013.deviceInfo.status : '-') : '-'}}
										</div>
									</div>
									<div class="row-item">
										<div class="title">第三方平台设备ID：</div>
										<div class="content">{{newDevice.outer_device_id ? newDevice.outer_device_id : '-'}}</div>
									</div>
									<div class="row-item">
										<div class="title">有车决策时间：</div>
										<div class="content">{{newClient.config_on_decision_time}}</div>
									</div>
									<div class="row-item">
										<div class="title">无车决策时间：</div>
										<div class="content">{{newClient.config_off_decision_time}}</div>
									</div>
									<div class="row-item">
										<div class="title">决策灵敏度：</div>
										<div class="content">{{newClient.config_decision_sensitivity}}</div>
									</div>
									<div class="row-item">
										<div class="title">心跳间隔时间：</div>
										<div class="content">{{newClient.config_heartbeat_time}}</div>
									</div>
									<div class="row-item">
										<div class="title">NCCID：</div>
										<div class="content">{{newClient.nccid ? newClient.nccid : '-'}}</div>
									</div>
									<div class="row-item">
										<div class="title"></div>
										<div class="content"></div>
									</div>
								</div>
								<div class="clear-20"></div>
							</div>
						</el-tab-pane>

						<el-tab-pane label="第三方设备信息" name="sixth">
							<div class="item-panel">
								<div class="row-content">
									<div class="row-item">
										<div class="title">名称：</div>
										<div class="content">{{device20013.deviceInfo && device20013.deviceInfo.name || "--"}}</div>
									</div>
									<div class="row-item">
										<div class="title">第三方平台设备ID：</div>
										<div class="content">{{newDevice.outer_device_id ? newDevice.outer_device_id : '-'}}</div>
									</div>
									<div class="row-item">
										<div class="title">设备类型：</div>
										<div class="content">{{device20013.deviceInfo && device20013.deviceInfo.manufacturerName}}</div>
									</div>
									<div class="row-item">
										<div class="title">设备厂商名称：</div>
										<div class="content">{{device20013.deviceInfo && device20013.deviceInfo.deviceType}}</div>
									</div>
									<div class="row-item">
										<div class="title">设备厂商ID：</div>
										<div class="content">{{device20013.deviceInfo && device20013.deviceInfo.manufacturerId}}</div>
									</div>
									<div class="row-item">
										<div class="title">型号：</div>
										<div class="content">{{device20013.deviceInfo && device20013.deviceInfo.model}}</div>
									</div>
								</div>
								<div class="clear-20"></div>
							</div>
						</el-tab-pane>

						<el-tab-pane label="推送记录" name="third">
							<el-row>
								<div class="device-log-list-table">
									<el-table :data="logList">
										<el-table-column width="180" label="记录时间"><template slot-scope="scope">{{scope.row.create_time | timeFormat}}</template></el-table-column>
										<el-table-column width="180" label="请求时间"><template slot-scope="scope">{{ (scope.row.request_time / 1000) | timeFormat}}</template></el-table-column>
										<el-table-column label="请求数据"><template slot-scope="scope"><a class="link" @click="showDataDialog(scope.row.request_data)">{{ JSON.stringify(scope.row.request_data) }}</a></template></el-table-column>
										<el-table-column label="URL" width="100">
											<template slot-scope="scope">
												<el-popover
														ref="popover1"
														placement="top"
														trigger="hover"
														:content="scope.row.url">
												</el-popover>
												<span v-popover:popover1>查看URL</span>
											</template>
										</el-table-column>
										<el-table-column label="Debug" width="80">
											<template slot-scope="scope">
												{{ !!scope.row.is_debug ? "是" : "" }}
											</template>
										</el-table-column>
										<el-table-column width="180" label="回应时间"><template slot-scope="scope">{{ (scope.row.response_time / 1000) | timeFormat}}</template></el-table-column>
										<el-table-column label="回应数据"><template slot-scope="scope"><a class="link" @click="showDataDialog(scope.row.response_data)">{{ JSON.stringify(scope.row.response_data) }}</a></template></el-table-column>
									</el-table>
								</div>
								<div class="flex-footer">
									<div class="flex-footer-content">
										<el-row>
											<el-col :span="24" class="text-center" v-if="total > 0">
												<el-pagination
														@current-change="relayPageChange"
														:current-page="logCurrentPage"
														:page-size="pageSize"
														layout="total, prev, pager, next, jumper"
														:total="logTotal">
												</el-pagination>
											</el-col>
										</el-row>
									</div>
								</div>
							</el-row>
						</el-tab-pane>

						<el-tab-pane label="操作" name="fourth">
							<el-row class="btn-row">
								<el-button type="success" @click="handleRelay">模拟数据上报</el-button>
								<el-button type="success" @click="editRemoteDevice">编辑第三方信息</el-button>
								<!--<el-button type="success" @click="registerIOT">注册到电信IOT平台</el-button>-->
								<!--<el-button type="success" @click="unRegisterIOT">反注册到电信IOT平台</el-button>-->
								<!--<router-link target="_blank" class="link"-->
								<!--:to="{path: '/admin/device/relay-log/list', query: { device_id: id, space: space }}">-->
								<!--查看推送记录-->
								<!--</router-link>-->
							</el-row>
							<el-row class="btn-row pb-40">
								<el-button type="success" @click="triggerCalibrate">触发校准</el-button>
								<el-button type="success" @click="triggerHeartbeat">触发心跳</el-button>
								<el-button type="success" @click="triggerCalibrateHeartbeat">触发校准和心跳</el-button>
								<el-button type="success" @click="triggerReboot">触发重启</el-button>
								<el-button type="success" @click="getConfig">获取设置</el-button>
								<el-button type="success" @click="showSetConfigDialog">基础设置</el-button>
								<el-button type="success" @click="showSetEnvironmentTrackTimeAndFrequencyPointDialog">设置环境跟踪值和频点</el-button>
							</el-row>
						</el-tab-pane>

						<el-tab-pane label="命令列表" name="fifth">
							<el-row>
								<div class="device-log-list-table">
									<el-table :data="cmdList">
										<el-table-column width="260" label="CMD ID"><template slot-scope="scope">{{scope.row.outer_cmd_id}}</template></el-table-column>
										<!--<el-table-column width="300" label="Device Id"><template slot-scope="scope">{{scope.row.outer_device_id}}</template></el-table-column>-->
										<!--<el-table-column width="180" label="IMEI"><template slot-scope="scope">{{scope.row.device_uid}}</template></el-table-column>-->
										<el-table-column label="Data">
											<template slot-scope="scope" min-width="180">
												{{scope.row.data}}
											</template>
										</el-table-column>
										<el-table-column width="180" label="Time"><template slot-scope="scope">{{ scope.row.create_time | timeFormat}}</template></el-table-column>
									</el-table>
								</div>
								<div class="flex-footer">
									<div class="flex-footer-content">
										<el-row>
											<el-col :span="24" class="text-center" v-if="cmdTotal > 0">
												<el-pagination
														@current-change="cmdPageChange"
														:current-page="cmdCurrentPage"
														:page-size="pageSize"
														layout="total, prev, pager, next"
														:total="cmdTotal">
												</el-pagination>
											</el-col>
										</el-row>
									</div>
								</div>
							</el-row>
						</el-tab-pane>

						<el-tab-pane label="历史数据" name="seventh">
							<el-row>
								<div class="device-log-list-table">
									<el-table :data="historyList">
										<el-table-column label="Service Id" width="100">
											<template slot-scope="scope" >
												{{scope.row.serviceId}}
											</template>
										</el-table-column>
										<el-table-column label="Data">
											<template slot-scope="scope">
												{{scope.row.data}}
											</template>
										</el-table-column>

										<el-table-column width="180" label="Timestamp"><template slot-scope="scope">{{ scope.row.timestamp }}</template></el-table-column>
									</el-table>
								</div>
								<div class="flex-footer">
									<div class="flex-footer-content">
										<el-row>
											<el-col :span="24" class="text-center" v-if="historyTotal > 0">
												<el-pagination
														@current-change="historyPageChange"
														:current-page="historyCurrentPage"
														:page-size="pageSize"
														layout="total, prev, pager"
														:total="historyTotal">
												</el-pagination>
											</el-col>
										</el-row>
									</div>
								</div>
							</el-row>
						</el-tab-pane>
					</el-tabs>
				</el-row>
			</div>



			<!--<el-row class="search-row" style="padding-bottom: 15px;">-->
			<!--<el-button type="success" @click="getCOAPServer">获取COAP服务器设置</el-button>-->
			<!--<el-button type="success" @click="showSetCOAPServerDialog">COAP服务器设置</el-button>-->
			<!--<el-button type="success" @click="getUDPServer">获取UDP服务器设置</el-button>-->
			<!--<el-button type="success" @click="showSetUDPServerDialog">UDP服务器设置</el-button>-->
			<!--</el-row>-->


			<!--<div class="flex-container" style="overflow: auto">-->
			<!--<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">-->
			<!--<el-tab-pane label="全部" name="first">-->

			<!--</el-tab-pane>-->
			<!--</el-tabs>-->
			<!--</div>-->


		</div>

		<el-dialog title="帧数据" :visible.sync="dialogVisible" custom-class="frame-dialog" width="600px">
			<div class="content">
				<pre class="consolas">{{ frame }}</pre>
			</div>
		</el-dialog>

		<!--模拟数据上报弹窗-->
		<el-dialog title="模拟数据上报" custom-class="edit-dialog" :visible.sync="relayModalVisible"
				   @close="relayDialogCloseCallback">
			<el-form :label-position="'left'" ref="relayForm" label-width="110px" :model="relayForm">
				<el-form-item label="车位状态">
					<el-radio-group v-model="relayForm.state">
						<el-radio :label="0">无车</el-radio>
						<el-radio :label="1">有车</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="relayDeviceData('relayForm')">发送</el-button>
			</div>
		</el-dialog>

		<!--基础设置-->
		<el-dialog title="基础设置" custom-class="edit-dialog" :visible.sync="setConfigModalVisible"
				   @close="setConfigDialogCloseCallback">
			<el-form :label-position="'left'" ref="configForm" label-width="110px" :model="configForm">
				<el-form-item label="决策开启时间:" prop="on_decision_time"
							  :rules="[{ required: true, message: '决策开启时间不能为空'}]">
					<el-input v-model="configForm.on_decision_time"></el-input>
				</el-form-item>
				<el-form-item label="决策关闭时间:" prop="off_decision_time"
							  :rules="[{ required: true, message: '决策关闭时间不能为空'}]">
					<el-input v-model="configForm.off_decision_time"></el-input>
				</el-form-item>
				<el-form-item label="灵敏度:" prop="sensitivity" :rules="[{ required: true, message: '灵敏度不能为空'}]">
					<el-input v-model="configForm.sensitivity"></el-input>
				</el-form-item>
				<el-form-item label="心跳时间:" prop="heartbeat_time" :rules="[{ required: true, message: '心跳时间不能为空'}]">
					<el-input v-model="configForm.heartbeat_time"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="writeDataSetConfig('configForm')">设置</el-button>
			</div>
		</el-dialog>

		<!--设置COAP服务器弹窗-->
		<el-dialog title="设置COAP服务器" custom-class="edit-dialog" :visible.sync="setCOAPServerModalVisible"
				   @close="setCOAPServerDialogCloseCallback">
			<el-form :label-position="'left'" ref="setCOAPServerForm" label-width="110px" :model="setCOAPServerForm">
				<el-form-item label="IP:" prop="ip" :rules="[{ required: true, message: 'IP不能为空'}]">
					<el-input v-model="setCOAPServerForm.ip"></el-input>
				</el-form-item>
				<el-form-item label="端口:" prop="port" :rules="[{ required: true, message: '端口号不能为空'}]">
					<el-input v-model="setCOAPServerForm.port"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="writeDataSetCOAPServer('setCOAPServerForm')">设置</el-button>
			</div>
		</el-dialog>

		<!--设置UDP服务器弹窗-->
		<el-dialog title="设置UDP服务器" custom-class="edit-dialog" :visible.sync="setUDPServerModalVisible"
				   @close="setUDPServerDialogCloseCallback">
			<el-form :label-position="'left'" ref="setUDPServerForm" label-width="110px" :model="setUDPServerForm">
				<el-form-item label="IP:" prop="ip" :rules="[{ required: true, message: 'IP不能为空'}]">
					<el-input v-model="setUDPServerForm.ip"></el-input>
				</el-form-item>
				<el-form-item label="端口:" prop="port" :rules="[{ required: true, message: '端口号不能为空'}]">
					<el-input v-model="setUDPServerForm.port"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="writeDataSetUDPServer('setUDPServerForm')">设置</el-button>
			</div>
		</el-dialog>

		<!--设置环境跟踪值和频点-->
		<el-dialog title="设置环境跟踪值和频点" custom-class="edit-dialog" :visible.sync="setEnvironmentTrackTimeAndFrequencyPointModalVisible">
			<el-form :label-position="'left'" ref="setEnvironmentTrackTimeAndFrequencyPointForm" label-width="110px" :model="setEnvironmentTrackTimeAndFrequencyPointForm">
				<el-form-item label="环境跟踪值:" prop="environment_track_time" :rules="[{ required: true, message: '环境跟踪值'}]">
					<el-input-number v-model="setEnvironmentTrackTimeAndFrequencyPointForm.environment_track_time"></el-input-number>
				</el-form-item>
				<el-form-item label="频点:" prop="frequency_point" :rules="[{ required: true, message: '频点'}]">
					<el-input-number v-model="setEnvironmentTrackTimeAndFrequencyPointForm.frequency_point"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="writeDataSetEnvironmentTrackTimeAndFrequencyPoint('setEnvironmentTrackTimeAndFrequencyPointForm')">设置</el-button>
			</div>
		</el-dialog>

		<!--数据上报结果弹窗-->
		<el-dialog title="推送结果" with="70%" :visible.sync="responseDialogVisible">
			<div v-for="(item, key) in relayResponse" class="pt-15">
				<div v-if="key === 'result' ||key === 'endpoint' ">
					<p style="font-size: 14px" v-if="key === 'result'">
						推送结果：
					</p>
					<p style="font-size: 14px" v-if="key === 'endpoint'">
						推送地址：
					</p>
				</div>
				<div v-else>
					<p style="font-size: 14px">
						{{key}}
					</p>
				</div>

				<div style="max-height: 400px; overflow: auto">
					<label>{{item}}</label>
				</div>

			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="responseDialogVisible = false">确认</el-button>
			</div>
		</el-dialog>

		<!--推送数据弹窗-->
		<el-dialog title="数据" :visible.sync="jsonDataDialogVisible" custom-class="json-data-dialog" width="600px">
			<div class="content">
				<pre class="consolas" style="white-space: pre-wrap; word-wrap: break-word; ">{{ jsonData }}</pre>
			</div>
		</el-dialog>


		<el-dialog title="编辑" :visible.sync="editRemoteDeviceVisible" width="600px">
			<el-form :label-position="'left'" label-width="110px" ref="remoteDeviceFrom" :model="remoteDeviceFrom">
				<el-form-item label="IMIE:">
					<el-input v-model="remoteDeviceFrom.nodeId" disabled></el-input>
				</el-form-item>
				<el-form-item label="厂商名称:">
					<el-input v-model="remoteDeviceFrom.manufacturerName" disabled></el-input>
				</el-form-item>
				<!--<el-form-item label="厂商ID:" prop="address">-->
					<!--<el-input v-model="remoteDeviceFrom.manufacturerId" disabled></el-input>-->
				<!--</el-form-item>-->

				<el-form-item label="设备类型:">
					<el-input v-model="remoteDeviceFrom.deviceType" disabled></el-input>
				</el-form-item>

				<el-form-item label="设备名称:">
					<el-input v-model="remoteDeviceFrom.name"></el-input>
				</el-form-item>
				<!--<el-form-item label="设备型号:" prop="address">-->
					<!--<el-input v-model="remoteDeviceFrom.model"></el-input>-->
				<!--</el-form-item>-->
				<!--<el-form-item label="模块类型:" prop="address">-->
					<!--<el-input v-model="remoteDeviceFrom.protocolType"></el-input>-->
				<!--</el-form-item>-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="confirmEditRemoteDevice">确认更新</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script type="text/ecmascript-6">

    import Core from 'core/core'

    export default {
        name: "device-detail-20013",
        props: {
            device: {
                type: Object,
                default: {}
            },
            client: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                Core: Core,
                activeName: 'first',
                id: '',
                space: '',
                dialogVisible: false,
                frame: '',

                // 分页配置
                total: 0,
                pageSize: 10,
                frameList: [],

                frameData: [],

                eventDialogVisible: false,

                setConfigModalVisible: false,
                configForm: {
                    on_decision_time: '',
                    off_decision_time: '',
                    sensitivity: '',
                    heartbeat_time: ''
                },

                setCOAPServerModalVisible: false,
                setCOAPServerForm: {
                    ip: '',
                    port: ''
                },

                setUDPServerModalVisible: false,
                setUDPServerForm: {
                    ip: '',
                    port: ''
                },

                setEnvironmentTrackTimeAndFrequencyPointModalVisible: false,
                setEnvironmentTrackTimeAndFrequencyPointForm: {
                    environment_track_time: '',
                    frequency_point: ''
                },

                relayModalVisible: false,
                relayForm: {
                    state: 0
                },

                newDevice: {},
                newClient: {},
                device20013: {},

                canOperate: true,

                responseDialogVisible: false,
                relayResponse: {},

                // 推送记录
                logList: [],
                logTotal: 0,
                logCurrentPage: 1,
                jsonDataDialogVisible: false,
                jsonData: '',

                editRemoteDeviceVisible: false,
				remoteDeviceFrom: {},

				// 命令列表
                cmdCurrentPage: 1,
				cmdTotal: 0,
				cmdList: [],

				// 历史数据
				historyList: [],
				historyTotal: 0,
				historyCurrentPage: 1,
            }
        },
        watch: {
            device: function (val) {
                this.newDevice = val;

                this.id = val.device_id;
                this.outer_device_id = val.outer_device_id;
                this.space = val.space;

                this.getOuterDeviceDetailFor20013(this.id);
                this.getClientFrameList(this.space, 1);
				this.getCmdList();
                this.getHistoryList();
            },
            client: function (val) {
                this.newClient = val;
            }
        },
        mounted: function () {
            //todo
        },
        methods: {
            getOuterDeviceDetailFor20013(id) {
                Core.Api.Frame.getOuterDeviceDetailFor20013(id).then(res => {
                    this.device20013 = res.device;
                });
            },

            getClientFrameList(space, currentPage) {
                Core.Api.Frame.getFrameListForSpace(this.id, this.space, '', currentPage).then(res => {
                    this.frameList = res.frame_list;
                    this.total = res.count;
                });
            },

            pageChange(val) {
                this.getClientFrameList(this.activeName, val);
            },

            handleClick(tab, event) {
                let type = tab.$options.propsData['name'];
                if(type === 'first') {
                    this.getClientFrameList(type, 1);
                }
                if(type === 'third') {
                    this.relayPageChange(1);
                }
            },

            showFrameDialog(frame) {
                this.dialogVisible = true;
                if (frame.data) {
                    frame.data = JSON.parse(frame.data);
                }
                this.frame = frame;
            },

            registerIOT() {
                if (!this.canOperate) {
                    this.$message.warning("请稍后再操作");
                    return;
                }
                Core.Api.Fengine.P20013Register(this.id)
                    .then(res => {
                        this.canOperate = true;
                        this.$message.success("操作成功");
                        this.getDeviceDetail();
                    })
                    .catch(err => {
                        this.canOperate = true;
                    })
            },

            unRegisterIOT() {
                if (!this.canOperate) {
                    this.$message.warning("请稍后再操作");
                    return;
                }
                Core.Api.Fengine.P20013UnRegister(this.id)
                    .then(res => {
                        this.canOperate = true;
                        this.$message.success("操作成功");
                        this.getDeviceDetail();
                    })
                    .catch(err => {
                        this.canOperate = true;
                    })
            },

            getConfig() {
                if (!this.canOperate) {
                    this.$message.warning("请稍后再操作");
                    return;
                }
                Core.Api.Fengine.P20013GetConfig(this.id)
                    .then(res => {
                        this.canOperate = true;
                        this.$message.success("操作成功");
                    })
                    .catch(err => {
                        this.canOperate = true;
                    })
            },

            getCOAPServer() {
                if (!this.canOperate) {
                    this.$message.warning("请稍后再操作");
                    return;
                }
                Core.Api.Fengine.P20013GetCOAPServer(this.id)
                    .then(res => {
                        this.canOperate = true;
                        this.$message.success("操作成功");
                    })
                    .catch(err => {
                        this.canOperate = true;
                    })
            },

            getUDPServer() {
                if (!this.canOperate) {
                    this.$message.warning("请稍后再操作");
                    return;
                }
                Core.Api.Fengine.P20013GetUDPServer(this.id)
                    .then(res => {
                        this.canOperate = true;
                        this.$message.success("操作成功");
                    })
                    .catch(err => {
                        this.canOperate = true;
                    })
            },

            triggerCalibrate() {
                if (!this.canOperate) {
                    this.$message.warning("请稍后再操作");
                    return;
                }
                Core.Api.Fengine.P20013TriggerCalibrate(this.id)
                    .then(res => {
                        this.canOperate = true;
                        this.$message.success("操作成功");
                    })
                    .catch(err => {
                        this.canOperate = true;
                    })
            },

            triggerHeartbeat() {
                if (!this.canOperate) {
                    this.$message.warning("请稍后再操作");
                    return;
                }
                Core.Api.Fengine.P20013TriggerHeartbeat(this.id)
                    .then(res => {
                        this.canOperate = true;
                        this.$message.success("操作成功");
                    })
                    .catch(err => {
                        this.canOperate = true;
                    })
            },

            triggerCalibrateHeartbeat() {
                if (!this.canOperate) {
                    this.$message.warning("请稍后再操作");
                    return;
                }
                Core.Api.Fengine.P20013TriggerCalibrateHeartbeat(this.id)
                    .then(res => {
                        this.canOperate = true;
                        this.$message.success("操作成功");
                    })
                    .catch(err => {
                        this.canOperate = true;
                    })
            },

            triggerReboot() {
                if (!this.canOperate) {
                    this.$message.warning("请稍后再操作");
                    return;
                }
                this.canOperate = false;
                Core.Api.Fengine.P20013TriggerReboot(this.id)
                    .then(res => {
                        this.canOperate = true;
                        this.$message.success("操作成功");
                    })
                    .catch(err => {
                        this.canOperate = true;
                    })
            },

            showSetConfigDialog() {
                this.setConfigModalVisible = true;
            },

            setConfigDialogCloseCallback() {
                this.configForm = {
                    on_decision_time: '',
                    off_decision_time: '',
                    sensitivity: '',
                    heartbeat_time: ''
                }
            },

            writeDataSetConfig(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid)
                        return false;

                    if (!this.canOperate) {
                        this.$message.warning("请稍后再操作");
                        return;
                    }

                    Core.Api.Fengine.P20013SetConfig(this.id,
                        this.configForm.on_decision_time,
                        this.configForm.off_decision_time,
                        this.configForm.sensitivity,
                        this.configForm.heartbeat_time)
                        .then(res => {
                            this.canOperate = true;
                            this.$message.success("操作成功");
                            this.setConfigModalVisible = false;
                        })
                        .catch(err => {
                            this.canOperate = true;
                        })
                });
            },

            showSetCOAPServerDialog() {
                this.setCOAPServerModalVisible = true;
            },

            setCOAPServerDialogCloseCallback() {
                this.setCOAPServerForm = {
                    ip: '',
                    port: ''
                }
            },

            writeDataSetCOAPServer(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid)
                        return false;

                    if (!this.canOperate) {
                        this.$message.warning("请稍后再操作");
                        return;
                    }

                    Core.Api.Fengine.P20013SetCOAPServer(this.id, this.setCOAPServerForm.ip, this.setCOAPServerForm.port)
                        .then(res => {
                            this.canOperate = true;
                            this.$message.success("操作成功");
                            this.setCOAPServerModalVisible = false;
                        })
                        .catch(err => {
                            this.canOperate = true;
                        })
                });
            },

            showSetUDPServerDialog() {
                this.setUDPServerModalVisible = true;
            },

            setUDPServerDialogCloseCallback() {
                this.setUDPServerForm = {
                    ip: '',
                    port: ''
                }
            },

            writeDataSetUDPServer(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid)
                        return false;

                    if (!this.canOperate) {
                        this.$message.warning("请稍后再操作");
                        return;
                    }

                    Core.Api.Fengine.P20013SetUDPServer(this.id, this.setUDPServerForm.ip, this.setUDPServerForm.port)
                        .then(res => {
                            this.canOperate = true;
                            this.$message.success("操作成功");
                            this.setUDPServerModalVisible = false;
                        })
                        .catch(err => {
                            this.canOperate = true;
                        })
                });
            },

            showSetEnvironmentTrackTimeAndFrequencyPointDialog() {
                this.setEnvironmentTrackTimeAndFrequencyPointModalVisible = true;
                this.setEnvironmentTrackTimeAndFrequencyPointForm = {
                    environment_track_time: '',
                    frequency_point: ''
                }
            },

            writeDataSetEnvironmentTrackTimeAndFrequencyPoint(formName) {
                console.log(formName);
                this.$refs[formName].validate((valid) => {
                    if (!valid)
                        return false;

                    if (!this.canOperate) {
                        this.$message.warning("请稍后再操作");
                        return;
                    }

                    Core.Api.Fengine.P20013SetEnvironmentTrackTimeAndFrequencyPoint(this.id, this.setEnvironmentTrackTimeAndFrequencyPointForm.environment_track_time, this.setEnvironmentTrackTimeAndFrequencyPointForm.frequency_point)
                        .then(res => {
                            this.canOperate = true;
                            this.$message.success("操作成功");
                            this.setEnvironmentTrackTimeAndFrequencyPointModalVisible = false;
                        })
                        .catch(err => {
                            this.canOperate = true;
                        })
                });
            },

            handleRelay() {
                this.relayModalVisible = true;
            },

            relayDeviceData(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid)
                        return false;

                    let requestUrl = `${Core.Const.NET.END_FEGOIT_POINT}/device/relay`;
                    let data = {
                        space: this.space,
                        device_id: this.id,
                        state: this.relayForm.state
                    };

                    Core.Api.doPost(requestUrl, data)
                        .then(res => {
                            this.$message.success("发送成功");
                            this.getClientFrameList(this.activeName, 1);
                            this.relayModalVisible = false;
                            this.relayResponse = "";
                            if (res.result_list && res.result_list.length > 0) {
                                this.relayResponse = res.result_list[0];

                                this.$nextTick(() => {
                                    this.responseDialogVisible = true;
                                })
                            }
                        })
                        .catch(err => {
                            this.$message.error(err.message);
                        })

                    // Core.Api.Device.relay(this.space, this.id, this.relayForm.state)
                    // 	.then(res => {
                    // 		this.$message.success("发送成功");
                    // 		this.getClientFrameList(this.activeName, 1);
                    // 		this.relayModalVisible = false;
                    // 		this.relayResponse = "";
                    // 		if (res.result_list && res.result_list.length > 0) {
                    // 			this.relayResponse = res.result_list[0];
                    // 		}
                    // 		this.$nextTick( () => {
                    // 			this.responseDialogVisible = true;
                    // 		})
                    // 	})
                    // 	.catch(err => {
                    // 		this.$message.error(err.message);
                    // 	})
                });
            },

            relayDialogCloseCallback() {
                this.relayForm = {
                    state: 0
                };
            },

            // 推送记录
            getRelayList() {
                Core.Api.RelayLog.getLogList(this.logCurrentPage, this.id).then(res => {
                    this.logList = res.log_list;
                    this.logTotal = res.count;
                }).catch(err => {

                });
            },
            relayPageChange(val) {
                this.logCurrentPage = val;
                this.getRelayList();
            },
            showDataDialog(data) {
                this.jsonDataDialogVisible = true;
                this.jsonData = data
            },

            editRemoteDevice() {
                this.editRemoteDeviceVisible = true;
				this.remoteDeviceFrom = this.device20013.deviceInfo ? this.device20013.deviceInfo : {};
			},


            confirmEditRemoteDevice() {
                let name = this.remoteDeviceFrom.name || '';
                Core.Api.Fengine.P20013UpdateDevice(this.id, name).then(res => {
                    this.$message.success("更新成功");
                    this.getOuterDeviceDetailFor20013(this.id);
                    this.editRemoteDeviceVisible = false;
				})
			},


			cmdPageChange(val) {
              this.cmdCurrentPage = val;
              this.getCmdList();
			},

			// 命令列表
			getCmdList() {
                let space = this.space;
                let outDeviceId = this.newDevice.outer_device_id;
                let page = this.cmdCurrentPage;
				let data = {
				   	'space': space,
					'outer_device_id': outDeviceId,
					'page': page,
					'token': Core.Data.getToken()
				};
				let requestUrl = "http://api.ajaiot.com/oc/cmd/list";
                Core.Api.doPost(requestUrl, data).then(res => {
                    this.cmdTotal = res.count;
                    this.cmdList = res.cmd_list;
                });
			},

			historyPageChange(val) {
                this.historyCurrentPage =val;
                this.getHistoryList();
			},

			getHistoryList() {
                Core.Api.Fengine.P20013getHistoryList(this.id, this.historyCurrentPage, this.pageSize).then(res => {
                   	this.historyTotal = res['response']['totalCount'];
                   	this.historyList = res['response']['deviceDataHistoryDTOs'];

				})
			}

        }
    }
</script>

<style scoped lang="scss">
	.device-frame-list {
		padding-top: 10px;
		height: 100%;
		.device-frame-list-container {
			height: 100%;
			.search-row {
				margin: 0;
				padding: 15px 30px;
				background: #fff;
				.el-form-item__label {
					padding-right: 10px;
					font-size: 12px;
				}
				.el-form-item__content {
					.el-input {
						width: 95px;
					}
				}
			}

			.device-frame-list-table {
				box-flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				flex: 1;
				-webkit-flex: 1;
				overflow: auto;
			}
		}

		a {
			cursor: pointer;
		}

		.panel-list {
			background: #fff;
			.item-panel {
				.tab-content {
					padding: 0 20px;
				}

				&:first-child {
					.row-title {
						border-top: none;
					}
				}
				.row-title {
					height: 50px;
					padding: 0 30px;
					overflow: hidden;
					border-top: 1px solid rgb(240, 240, 246);

					.title {
						font-size: 14px;
						line-height: 50px;
						color: #03CC75;
						font-weight: bold;
					}
				}

				.row-content {
					overflow: hidden;
					background: #FBFBFC;
					.row-item {
						width: 50%;
						float: left;
						height: 40px;
						padding-left: 30px;
						line-height: 40px;
						border-top: 1px solid rgb(240, 240, 246);

						&:nth-child(2n) {
							border-left: 1px solid rgb(240, 240, 246);
						}

						.title {
							font-weight: bold;
							font-size: 12px;
							color: #A9A9B1;
							float: left;
							width: 155px;
						}

						.content {
							font-size: 12px;
							color: #4D4D4D;
							font-weight: bold;
							float: left;
						}
						.action {
							float: right;
							width: 50px;
							height: 50px;
						}
					}
				}
			}
		}
		.btn-row {
			padding: 15px 0;
		}
		.pb-40 {
			padding-bottom: 40px;
		}

		.el-radio {
			margin-right: 20px;
		}
		.bg-white {
			background: white;
		}

	}
</style>
